<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>Vue 第一阶段</title>
    <script src="js/vue.js"></script>
</head>
<style>
    ul {
        list-style: none;
    }

    li {
        margin-top: 10px;
    }

    div {
        margin-top: 10px;
    }
</style>
<body>
<div id="app">
    {{ message }}<br/> {{* message }}仅此第一次<br/>
    {{ message | capitalize }}<br/>
    <input type="text" v-model="message"/>
    <button v-on:click="reverseMessage">reverseMessage</button>
    <br/> <br/>
    <input type="text" v-model="newProduct" v-on:keyup.enter="addProduct" placeholder="input new product name"/>
    <ul>
        <li v-for="p in products">
            {{p.id}}.{{p.name}}
            <button v-on:click="removeProduct($index)">Delete</button>
        </li>
    </ul>
    <div v-if="greeting">hello</div>
    <div>
        <input type="text" v-model="a"/> + <span>{{b}}</span>=<span>{{c}}</span>
        d={{d}}(a+100)
    </div>
    <div id="a{{id}}">
        {{{content}}}
    </div>
    <div>
        <a v-bind:href="url" target="_blank">百度</a>
        <a v-bind:href.literal="http://www.google.com.hk" target="_blank">谷歌</a> 修饰符 (Modifiers)
    </div>
    <div>
        <button :disabled="btnEnble">Click</button>
        指令缩写
        <button @click="btnClick">Click</button>
    </div>
    <div class="div_c" v-bind:class="classObj">
        bind class
    </div>
    <div class="div_c" v-bind:class="[classC,classD]">
        class 数组
    </div>
    <div v-bind:style="styleObject">
        style bind
    </div>
    <div>
        <template v-if="hasTemplate">
            <h1>vuejs</h1>
            <h2>vuejs</h2>
            <h3>vuejs</h3>
        </template>
        <template v-else>
            <h4>vuejs</h4>
        </template>
    </div>
    <div>
        <h1>template v-for</h1>
        <template v-for="s in students">
            <p>id：{{s.id}}</p>
             <p>姓名：{{s.name}}</p>
        </template>
    </div>
</div>
</body>
</html>
<script>
    //开启Debug
    Vue.config.debug = true
    var vm = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue.js!',
            products: [{
                id: 1,
                name: '笔记本'
            }, {
                id: 2,
                name: '冰箱'
            }],
            newProduct: 'erwerwe',
            greeting: true,
            a: 1,
            b: 1,
            c: 2,
            content: '<b>粗体文字</b>',
            id: 'div1',
            url: 'http://www.baidu.com',
            btnEnble: 'disabled',
            classObj: {
                classA: true,
                classB: false
            },
            classC: 'classC',
            classD: 'classD',
            styleObject: {
                fontSize: '30px',
                color: 'red'
            },
            hasTemplate: false,
            students: [
                {
                    id: 1,
                    name: '张三'
                },
                {
                    id: 2,
                    name: '李四'
                }, {
                    id: 3,
                    name: '赵六'
                }]
        },
        created: function () {
            console.log('实例化 结束了....');
        },
        beforeCompile: function () {
            console.log('beforeCompile');
        },
        compiled: function () {
            console.log('compiled');
        },
        ready: function () {
            console.log('ready');
        },
        beforeDestroy: function () {
            console.log('beforeDestroy');
        },
        destroyed: function () {
            console.log('destroyed');
        },
        computed: {
            d: {
                set: function (value) {
                    this.a = value;
                },
                get: function () {
                    return parseInt(this.a) + 100;
                }
            }
        },
        methods: {
            reverseMessage: function () {
                this.message = this.message.split('').reverse().join('')
            },
            addProduct: function () {
                var p = this.newProduct;
                alert(p);
                if (p) {
                    this.products.push({
                        id: this.products.length + 1,
                        name: this.newProduct
                    });
                    this.newProduct = '你好';
                }
            },
            removeProduct: function (index) {
                this.products.splice(index, 1);
            },
            btnClick: function () {
                alert('btnClickHandle');
            }
        }
    })
    vm.$el;
    vm.$watch('a', function (newValue, oldValue) {
        vm.c = vm.b + parseInt(newValue);
    });
    vm.d = 99;
    vm.students.push({
        id:9,
        name:'新学生'
    })
</script>